<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>图鉴网</title>
    <!-- Styles -->
    <link href="css/app.css" rel="stylesheet">
    <script src="js/app.js"></script>
</head>

<body>
    <div id="app" v-cloak>

        <el-container>
            <!-- Header -->
            <el-header style="text-align: center; font-size: 18px; font-weight: 400;">
                <span class="" style="text-align: center;">妙奇星球图鉴</span>
            </el-header>

            <!-- Header -->
            <el-main>
                <el-row type="flex" justify="center">
                    <el-col :span="16" :xs="{span: 24}" :sm="{span: 24}" :md="{span: 22}" :lg="{span: 20}"
                        :xl="{span: 18}">
                        <el-select v-model="mission_types.current_key" placeholder="任务类型" size="small"
                            style="width:160px;" clearable @change="MissionsTableFilterTypeChange">
                            <el-option :key="item.key" :label="item.value" :value="item.key"
                                v-for="item in mission_types.data">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>

                <el-row type="flex" justify="center">
                    <el-col :span="16" :xs="{span: 24}" :sm="{span: 24}" :md="{span: 22}" :lg="{span: 20}"
                        :xl="{span: 18}">
                        <el-divider></el-divider>
                    </el-col>
                </el-row>

                <el-row type="flex" justify="center">
                    <el-col :span="16" :xs="{span: 24}" :sm="{span: 24}" :md="{span: 22}" :lg="{span: 20}"
                        :xl="{span: 18}">
                        <el-table size="small" border :data="missions.data" @sort-change="MissionsTableSortChange">
                            <!-- No -->
                            <el-table-column sortable="custom" prop="no" label="No" width="80"></el-table-column>

                            <!-- 任务类型 -->
                            <el-table-column sortable="custom" prop="type" label="任务类型" width="150"></el-table-column>

                            <!-- 任务名称 -->
                            <el-table-column prop="title" label="任务名" width="120"></el-table-column>

                            <!-- 任务需求 -->
                            <el-table-column prop="requirement_desc" label="描述" width=""></el-table-column>

                            <!-- 任务奖励 -->
                            <el-table-column prop="rewards_desc" label="任务奖励" width=""></el-table-column>

                            <!-- 可解锁 -->
                            <el-table-column sortable="custom" prop="unlock" label="可解锁"></el-table-column>

                            <!-- 大神建议 -->
                            <el-table-column prop="hint" label="攻略提示"></el-table-column>
                        </el-table>

                        <el-pagination layout="sizes, prev, pager, next, ->, total" background
                            :page-sizes="[10, 20, 30, 40, 50, 100, 200]" :current-page="missions.paginator.current_page"
                            :page-size="missions.paginator.per_page" :total="missions.paginator.total"
                            @size-change="MissionTablePageSizeChange" @current-change="MissionTableCurrentPageChange">
                        </el-pagination>
                    </el-col>
                </el-row>
            </el-main>

        </el-container>

    </div>
</body>
<!-- import JavaScript -->

<script>
    const app = new Vue({
        el: '#app',
        data: () => {
            return {
                missions: {
                    data: [],
                    editing_item: {
                        id: null,
                        no: null,
                        type: null,
                        title: null,
                        requirement_desc: null,
                        rewards_desc: null,
                        unlock: null,
                        hint: null,
                        latest_contribution_id: null,
                    },
                    filter: {
                        type: null,
                    },
                    paginator: {
                        current_page: 1,
                        per_page: 50,
                        total: null,
                    },
                    sorter: {
                        column: null,
                        order: null,
                    },
                },
                mission_types: {
                    current_key: '',
                    data: [],
                },
            };
        },
        mounted() {
            this.refreshMissionsData();
            this.fetchMissionTypesData();
        },
        methods: {
            // 获取任务数据
            refreshMissionsData() {
                this.axios.get(API_URL + '/api/missions', {
                    params: {
                        mission_type: this.missions.filter.type, // 筛选：任务类型
                        page: this.missions.paginator.current_page, // 选择当前页，默认为 1
                        per_page: this.missions.paginator.per_page, // 分页大小，默认 50
                        column: this.missions.sorter.column, // 排序列
                        order: this.missions.sorter.order // 排序方向
                    }
                }).then((res) => {
                    this.missions.data = res.data.data;
                    this.missions.paginator.current_page = res.data.current_page;
                    this.missions.paginator.per_page = res.data.per_page;
                    this.missions.paginator.total = res.data.total;
                }).catch((res) => {
                    console.log(res);
                });
            },
            // 获取任务类型数据
            fetchMissionTypesData() {
                this.axios.get(API_URL + '/api/mission_types').then((res) => {
                    this.mission_types.data = res.data;
                }).catch((res) => {
                    console.log(res);
                });
            },
            // 任务表格排序状态发生变更
            MissionsTableSortChange(sorter) {
                this.missions.sorter.column = sorter.prop;
                this.missions.sorter.order = sorter.order;
                this.refreshMissionsData();
            },
            MissionsTableFilterTypeChange(mission_type) {
                this.missions.filter.type = mission_type;
                this.refreshMissionsData();
            },
            // 修改分页大小
            MissionTablePageSizeChange(size) {
                this.missions.paginator.per_page = size;
                this.refreshMissionsData();
            },
            // 任务表格翻页
            MissionTableCurrentPageChange(page) {
                this.missions.paginator.current_page = page;
                this.refreshMissionsData();
            },
        },
    })
</script>

</html>
<style>

</style>